import React, { useRef, useState } from 'react';
import {
    Form, Row, Col,
    Input, Select,
    Button, Cascader
} from 'antd';
import {
    DownOutlined,
    UpOutlined
} from '@ant-design/icons';
const { Option } = Select;
const AdvancedSearchForm = (props) => {
    const [form] = Form.useForm();
    const formRef = useRef(null);
    const [open, setOpen] = useState(false)
    const [showMore] = useState(props.formItems.length > 3)
    let initialValues = {}
    props.formItems.map(el => {
        initialValues[el.name] = undefined
    })
    const getFields = (formItems) => {
        const children = formItems || [];
        let node = []
        children.map((el, index) => {
            let fieldNames = el.fieldNames  || {label: 'value', value: 'id'}
            node.push(
                <Col span={12} style={{'display': open || index < 3 ? 'block': 'none'}} xl={{span: 6}} key={index}>
                    <Form.Item
                        name={el.name}
                        label={el.label}
                        rules={[
                            {
                                required: el.required,
                                message: el.placeholder,
                            },
                        ]}
                    >
                        {el.type === 1 ? <Input placeholder={el.placeholder} /> :
                            el.type === 2 ?
                            <Select
                            placeholder="请选择"
                            showSearch
                            fieldNames={fieldNames}
                            options={el.options}
                            onSelect={(val) => handleChange(val, el.name)}>
                            {/* {el.options.map(val => (
                                <Option
                                    key={val[fieldNames['value']]}
                                    value={val[fieldNames['value']]}
                                >
                                    {val[fieldNames['label']]}
                                </Option>
                            ))} */}
                        </Select> :
                                el.type === 3 ? <Cascader placeholder="请选择" fieldNames={fieldNames} options={el.options} onChange={handleChange} changeOnSelect /> : null}
                    </Form.Item>
                </Col>
            )
        })
        return node;
    };
    function handleChange (value, name) {
        console.log(`selected ${value}`);
        formRef.current.setFieldsValue({[name]: value})
    }
    const onFormSubmit = values => {
        props.setParentState(values)
    };
    return (
        <Form
            form={form}
            ref={formRef}
            name="advanced_search"
            className="ant-advanced-search-form"
            initialValues={initialValues}
            onFinish={onFormSubmit}
        >
            <Row gutter={24}>
                {getFields(props.formItems || [])}
                <Col span={12} xl={{span: 6}} className={`flex`} style={{ marginBottom: 16 }}>
                    {showMore ? <Button onClick={() => {
                        setOpen(!open);
                        props.resize && props.resize(!open);
                    }}>{!open?<DownOutlined /> :<UpOutlined />}{!open?'展开':'收起'}条件</Button>:null}
                    <Button style={{ marginLeft: 16 }} type="primary" htmlType="submit">查询</Button>
                <Button
                style={{ marginLeft: 16 }}
                onClick={async () => {
                    await form.resetFields();
                    onFormSubmit()
                }}>重置</Button>
                </Col>
            </Row>
            <Row gutter={24}  style={{marginBottom: 15 }}>
                <Col span={12}>
                    <h3 className='text-black-600 text-sm leading-4 divide-x border-solid border-l-2 pl-2 border-orange-f9'>{props.title || '列表'}</h3>
                </Col>
                <Col span={12} style={{textAlign:'right' }}>
                    {props.actions}
                </Col>
            </Row>
        </Form>
    );
};
export default AdvancedSearchForm